<script setup lang="ts">
import { toRefs, ref } from "vue";
// import { useI18n } from "vue-i18n";

// const { t } = useI18n();
// const $t = key => {
//   return t("home.win_list." + key);
// };
const emit = defineEmits(["flag", "open", "openAll"]);
const props = defineProps({
  count: Number,
  isBomb: Boolean,
  index: Number,
  animate: {
    type: Boolean,
    default: false
  }
});
const { count, isBomb, index, animate } = toRefs(props);
const isOpen = ref(false);
const isFlag = ref(false);

const handleBom = () => {
  open();
};
const open = () => {
  if (isOpen.value || isFlag.value) {
    return;
  }
  isOpen.value = true;
  emit("open");
};
const handleRightClick = event => {
  event.preventDefault();
  if (isOpen.value) {
    return;
  }
  isFlag.value = !isFlag.value;
  emit("flag", isFlag.value);
};

const reset = () => {
  isOpen.value = false;
  isFlag.value = false;
};

defineExpose({
  reset,
  open,
  isFlag,
  isBomb
});
</script>
<template>
  <div
    class="grid-item"
    :class="{ opened: isOpen }"
    @click="handleBom"
    @contextmenu="handleRightClick"
  > 
    
      <!-- 雷 -->
      <template v-if=" index == 0 ||index == 4||index == 20||index == 24 ">
        <span class="w70 rotate90 lei" :class="{front: animate}">
          <img class="w50" src="../../../assets/sweep/bom.png">
        </span>
      </template>
      <!-- 金币 -->
      <template v-else>
        <div class="w70 jb" :class="{front: animate}" v-if="index != 12">
          <img class="w50" src="../../../assets/sweep/jb.png">
        </div>
      </template>
    
    <!-- 宝箱 -->
    <template v-if="index == 12"> 
      <div class="cols bx" style="background-color: rgb(118 , 24, 26);" :class="{front: animate}">
        <img class="w60" src="../../../assets/sweep/bx.png">
      </div>
    </template>
    <div class="w70" :class="{back: animate}">
      <!-- <img class="w50" src="../../../assets/sweep/b1.png"> -->
    </div>
  </div>
</template>
<style lang="less" scoped>
.w70 {
  width: 100%;
  height: 100%; 
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.cols{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.w50{
  width: 50px;
  height: 50px;
  
}
.jb{
  background-color: rgb(174 , 131, 31);
}
.lei{
  background-color: rgb(57 , 34, 92);
}
 
 .rotate90{
  transform: rotate(270deg);
 } 
.wh70 {
  width: 70px;
  height: 70px;
}
.grid-item {
  position: relative;
  display: inline-block !important;
  // background-color: rgb(118 , 24, 26);
}
.back{
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../../../assets/sweep/b1.png);
  background-size: cover;
  z-index: -1;
  animation: spin-reverse 0.6s linear;

}
.front{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  animation: spin 0.6s linear;
}
@keyframes spin {
  0% {
    transform: rotateY(0);
    z-index: 0;
  }

  100% {
    transform: rotateY(180deg);
    z-index: -1;
  }
}

@keyframes spin-reverse {
  0% {
    transform: rotateY(-180deg);
    z-index: -1;
  }

  100% {
    transform: rotateY(0);
    z-index: 0;
  }
}
</style>
